<template>
  <div class="cart">
    <header class="header">
      <span class="iconfont icon-zuojiantou2" @click="back"></span>
      <p>购物车<em>( 6 )</em></p>
      <h3>编辑</h3>
    </header>
    <div class="content">
      <ul class="list">
        <li>
          <div class="list-t">
            <h1><i class="iconfont icon-duihao"></i></h1>
            <span class="iconfont icon-dianpu"></span>
            <p>靓禾良仓官方旗舰店</p>
            <em class="iconfont icon-youjiantou1"></em>
          </div>
          <ul class="list-m">
            <li>
              <h1><i class="iconfont icon-duihao"></i></h1>
              <div class="goods">
                <h2><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></h2>
                <h3>
                    <p>【第二份减3元】靓禾良仓 东北三色糙米 400g*5袋 健身杂粮</p>
                </h3>
                <h4>
                    <h5>￥29.00</h5>
                    <h6>￥49.00</h6>
                    <strong class="iconfont icon-lajitong"></strong>
                </h4>
              </div>
            </li>
            <li>
              <h1><i class="iconfont icon-duihao"></i></h1>
              <div class="goods">
                <h2><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></h2>
                <h3>
                    <p>【第二份减3元】靓禾良仓 东北三色糙米 400g*5袋 健身杂粮</p>
                </h3>
                <h4>
                    <h5>￥29.00</h5>
                    <h6>￥49.00</h6>
                    <strong class="iconfont icon-lajitong"></strong>
                </h4>
              </div>
            </li>
          </ul>
          <div class="list-b">
            <div class="list-b-top"><span>包邮</span>店铺内任意商品包邮</div>
            <div class="list-b-bom"><p><em>小计共 ( 2 ) 件 :</em><i>￥58.00</i></p></div>
          </div>
        </li>
        <li>
          <div class="list-t">
            <h1><i class="iconfont icon-duihao"></i></h1>
            <span class="iconfont icon-dianpu"></span>
            <p>靓禾良仓官方旗舰店</p>
            <em class="iconfont icon-youjiantou1"></em>
          </div>
          <ul class="list-m">
            <li>
              <h1><i class="iconfont icon-duihao"></i></h1>
              <div class="goods">
                <h2><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></h2>
                <h3>
                    <p>【第二份减3元】靓禾良仓 东北三色糙米 400g*5袋 健身杂粮</p>
                </h3>
                <h4>
                    <h5>￥29.00</h5>
                    <h6>￥49.00</h6>
                    <strong class="iconfont icon-lajitong"></strong>
                </h4>
              </div>
            </li>
          </ul>
          <div class="list-b">
            <div class="list-b-bom"><p><em>小计共 ( 1 ) 件 :</em><i>￥29.00</i></p></div>
          </div>
        </li>
      </ul>
      <div class="footer">
        <h1><i class="iconfont icon-duihao"></i></h1>
        <h2>全选</h2>
        <div>
          <h3>
            <span>合计:<em>￥87.00</em></span>
            <strong>为您节省 : ￥0.00</strong>
          </h3>
          <h4>结算(3)</h4>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'mint-ui'
import axios from 'axios'
Vue.use(Swipe, SwipeItem)
export default {
  methods: {
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.cart{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header{
    height: 0.44rem;
    line-height: 0.44rem;
    border-bottom: 1px solid #ccc;
    padding: 0 0.1rem;
    span{
      font-size: 0.17rem;
      float: left;
    }
    p{
      font-size: 0.16rem;
      font-weight: bold;
      margin-left: 0.2rem;
      float: left;
      em{
        font-size: 0.15rem;
        padding-left:0.1rem; 
      }
    }
    h3{
      font-size: 0.13rem;
      float: right;
    }
  }
  .content{
      flex: 1;
      overflow-y: auto;
      background: #f2f2f2;
    .list{
      width: 100%;
      li{
        background: #fff;
        margin-bottom:0.1rem;
        .list-t{
            width: 100%;
            height: 0.4rem;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
            padding: 0 0.1rem;
          h1{             
            height: 0.2rem;
            width: 0.2rem;
            text-align: center;
            line-height: 0.18rem;
            box-sizing: border-box;
            border: 2px solid #999;
            border-radius: 50%;
            background: orange;
            margin-right: 0.15rem;
            i{
              color: #fff;
              font-size: 0.14rem;
            }         
          }
          span{
            font-size: 0.16rem;
            color: #555;
          }
          p{
            font-size: 0.12rem;
            padding: 0 0.03rem 0 0.08rem;
            color: #333;
          }
          em{
            font-size: 0.16rem;
            color: #333;
          }
        } 
        .list-m{
            width: 100%;
            border-bottom: 1px solid #ccc;
          li{
              width: 100%;
              height: 1.05rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom:0; 
            h1{             
              height: 0.2rem;
              width: 0.2rem;
              text-align: center;
              line-height: 0.18rem;
              box-sizing: border-box;
              border: 2px solid #999;
              border-radius: 50%;
              background: orange;
              margin-left:0.1rem;
              i{
                color: #fff;
                font-size: 0.14rem;
              }         
            }
            div{
              height: 100%;
              width: 90%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              border-bottom:1px solid #ccc;
              h2{
                height: 0.8rem;
                width: 0.8rem;
                border:1px solid #eee;
                img{
                  width: 100%;
                  height: 100%;
                }
              }
              h3{
                height: 0.8rem;
                width:55%;
                display: flex;
                flex-direction: column;
                p{
                  font-size: 0.12rem;
                  width: 100%;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              h4{
                height: 100%;
                text-align: center;
                margin-right: 0.1rem;
                h5{
                  font-size: 0.14rem;
                  color: orangered;
                  margin-top: 0.1rem;
                }
                h6{
                  font-size: 0.1rem;
                  text-decoration: line-through;
                  color: #999;
                  margin-bottom: 0.2rem;
                }
                strong{
                  font-size: 0.18rem;
                  color: #666;
                }
              }
            }
          }
          li:last-child{
            div{
              border: none;
            }
          }
        }
        .list-b{
          width: 100%;
          display: flex;
          flex-direction: column;
          box-sizing: border-box;
          padding: 0.05rem 0.1rem;
          .list-b-top{
            width: 100%;
            font-size: 0.13rem;
            color: #999;
            span{
              font-size: 0.1rem;
              color: #fff;
              background: orange;
              padding:2px;
              border-radius: 4px;
              margin-right:0.08rem; 
            }
          }
          .list-b-bom{
            width: 100%;
            font-size: 0.13rem;
            p{
              float: right;
              em{
                color: #999;
              }
              i{
                color: orangered;
                font-size: 0.14rem;
                font-weight: bold;
                padding-left: 0.05rem;
              }
            }
          }
        }
      }
    }
    .footer{
      height: 0.44rem;
      width: 100%;
      position: fixed;
      bottom: 0; 
      display: flex;
      align-items: center;
      justify-content: space-between;
      h1{             
        height: 0.2rem;
        width: 0.2rem;
        text-align: center;
        line-height: 0.18rem;
        box-sizing: border-box;
        border: 2px solid #999;
        border-radius: 50%;
        background: orange;
        margin-left: 0.1rem;
        i{
          color: #fff;
          font-size: 0.14rem;
        }         
      }
      h2{
        width: 25%;
      }
      div{
        width: 60%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h3{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 10%;
          span{
            font-size: 0.1rem;
            color: #999;
            em{
              font-size: 0.14rem;
              color: orangered;
            }
          }
          strong{
            font-size: 0.1rem;
            color: #999;
          }
        }
        h4{
          width: 40%;
          height: 100%;
          line-height:0.44rem;
          text-align: center;
          font-size: 0.14rem;
          color: #fff;
          background: orange;
        }
      }
    }
  }
}
</style>